<template>
  <div class="map-container map-wrap">
    <div class="map-container"
         ref="map3d"
         :style="cesiumStyle">
      <sm-viewer :navigation="true"
                 :contextOptions="contextOptions"
                 :shouldAnimate="true"
                 @ready="ready" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: "",
      cesiumStyle: {
        width: "100%"
      },
      contextOptions: {
        webgl: {
          preserveDrawingBuffer: true
        }
      },
      showLoadLayerDialog: false,
      token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYWViMjNhZi00YmRkLTQyNTMtYmUxZC1hNGI2MTRjYjY1NjIiLCJpZCI6MzgxMCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTUzODk2OTMxM30.SIF0-gx34y800RPXS79iQy1JQAC0X6AVqPNTFKHLqhE'
    }
  },
  mounted () {

    this.ready()
  },
  methods: {
    ready ({ Cesium, viewer }) {
      // 设置全局变量
      // window.Cesium = this.$options._base.prototype.$Cesium = Cesium;
      // window.viewer = this.$options._base.prototype.$viewer = viewer;

      const scene = viewer.scene;
      const widget = viewer.cesiumWidget;
      const creditContainer = widget.creditContainer;
      creditContainer.style.display = "none";
      const URL_CONFIG = {
        BINGMAP: "https://dev.virtualearth.net",
        BING_MAP_KEY:
          "AqgBIfrBG50dl7Ykc9nANoj5UJnIxg5YyEZu-UE7sY_sHoZT1db1jGZAalBsU73w",
        STK:
          "https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path"
      };

      try {
        // 添加S3M图层服务
        const url =
          "http://106.14.203.229:8090/iserver/services/3D-xia/rest/realspace/datas/Config/config";
        // 东阳三中
        const DYSZ =
          "http://106.14.203.229:8090/iserver/services/3D-dyzx/rest/realspace/datas/Config/config";
        const promise = scene.addS3MTilesLayerByScp(url);
        Cesium.when(
          promise,
          layers => {
            // 加载地形
            // const terrainProvider = new Cesium.CesiumTerrainProvider({
            //   url: URL_CONFIG.STK,
            //   requestWaterMask: true,
            //   requestVertexNormals: true
            // });
            // terrainProvider._label = '全球地形'
            // viewer.terrainProvider = terrainProvider
            // 加载影像
            // const BindMapIMG = new Cesium.BingMapsImageryProvider({
            //   url: 'https://dev.virtualearth.net',
            //   mapStyle: Cesium.BingMapsStyle.AERIAL,
            //   key: URL_CONFIG.BING_MAP_KEY
            // })
            // BindMapIMG._label = 'WGS84影像'
            // viewer.imageryLayers.addImageryProvider(BindMapIMG)
            // 设置相机视角
            const dest = Cesium.Cartesian3.fromDegrees(
              119.47998,
              30.3265663,
              500
            );
            // const dest = Cesium.Cartesian3.fromDegrees(
            //   120.21589324382199,
            //   29.278034154128345,
            //   500
            // );
            scene.camera.setView({
              // 将经度、纬度、高度的坐标转换为笛卡尔坐标
              destination: dest,
              // 方位角、俯仰角和滚动角
              orientation: {
                heading: 0.349805911556369,
                pitch: -1.1142138652616556,
                roll: 6.283185307179359
              }
            });
          },
          e => {
            if (widget._showRenderLoopErrors) {
              const title = "渲染时发生错误，已停止渲染。";
              widget.showErrorPanel(title, undefined, e);
            }
          }
        );
      } catch (e) {
        if (widget._showRenderLoopErrors) {
          const title = "渲染时发生错误，已停止渲染。";
          widget.showErrorPanel(title, undefined, e);
        }
      }
    }
  }
};
</script>
<style lang='scss'>
#map {
  height: 100%;
  width: 100%;
}
.content {
  padding: 0px;
}
.content-box {
  margin-left: -40px;
}
.content-collapse {
  left: 105px;
}
</style>
